<!-- 用户管理  -->
<template>
  <div class="layout-container">
    <el-container class="layout-container">
      <el-main class="mainWrapper">
        <div class="search-container">
          <el-form :inline="true" class="topWrapper">
            <el-form-item>
              <el-input size="mini" @keyup.enter.native="handleSearch" placeholder="请输入登录用户名" v-model="listQuery.username" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-input size="mini" @keyup.enter.native="handleSearch" placeholder="请输入单位编码" v-model="listQuery.dwbm" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" icon="el-icon-plus" v-if="sys_user_add" @click="handleAdd">添加</el-button>
            </el-form-item>
            <el-form-item class="rightBtn">
              <el-button size="mini" type="primary" icon="el-icon-setting" @click="cccEvent('show', sysUserColumnTable)">配置列</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="table-container">
          <el-table size="medium" ref="yhTable" :key='tableKey' :data="list" v-loading="listLoading" border highlight-current-row :height="tableHeight">
            <el-table-column
              fixed="left"
              label="序号"
              type="index"
              width="50"
              align="center"
            ></el-table-column>
            <template v-for="col in sysUserData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="col.id"
                :prop="col.field"
                :label="col.title"
                :min-width="col.minWidth"
                :align="col.align"
                :header-align="col.align"
                :sortable="col.sortable"
                :formatter="col.formatter"
                :fixed="col.fixed"
              ></el-table-column>
            </template>
            <el-table-column fixed="right" align="center" label="操作" width="150" v-if="sys_user_update  || sys_user_delete ">
              <template slot-scope="scope">
                <el-button v-if="sys_user_update" size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
                <el-button v-if="sys_user_delete" size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>

          <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.current" :page-size="listQuery.size" :page-sizes="[10, 40, 80, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 添加 -->
    <AddUser :addUserData="addUserData" @addUserCallData="addUserCallData"></AddUser>

    <!-- 编辑 -->
    <EditUser :editUserData="editUserData" @editUserCallData="editUserCallData"></EditUser>

    <!-- 列配置 -->
    <ccc ref="ccc"></ccc>

  </div>
</template>

<script>
  import { adminModulePrefix } from '../../../config'
  import { fetchList, delObj } from '@/api/admin/user';
  import { mapGetters } from 'vuex';
  import AddUser from './modules/AddUser.vue';
  import EditUser from './modules/EditUser.vue';
  import {nowDate} from '@/utils/moment.js';
  import ccc from "@/dialogCommom/ccc";
  import { getUserInfo } from "@/utils/utilInfo.js";
  export default {
    data() {
      return {
        tableKey: 0, // table表格唯一标识
        listLoading: false, // 加载动画
        list: [], // 用户信息列表
        listQuery: { // 用户信息列表请求参数
          current: 1,
          size: 10,
          username: '',
          dwbm: ''
        },
        total: 0, // 用户信息列表总数
        sys_user_add: false, // 判断当前用户是否有添加用户的权限
        sys_user_update: false, // 判断当前用户是否有编辑用户的权限
        sys_user_delete: false, // 判断当前用户是否有删除用户的权限
        sys_user_select: false, // 判断当前用户是有有选择用户的权限
        tableHeight: "calc(100% - 40px)", // table表格的高度
        addUserData: { // 传给添加组件的参数
          dialogFormVisible: false
        },
        editUserData: { // 传给编辑组件的参数
          dialogFormVisible: false,
          row: {},
          sys_user_delete: false
        },
        sysUserColumnTable: 'system_sys_user', // 用户管理列配置参数
        sysUserData: [] //用户管理表格列数据
      }
    },
    components: {
      AddUser,
      EditUser,
      ccc
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          0: '有效',
          1: '无效',
          9: '锁定'
        }
        return statusMap[status]
      }
    },
    computed: {
      ...mapGetters(['permissions'])
    },

    mounted() {
      const that = this
      that.cccEvent("load", that.sysUserColumnTable)
      that.getList()
      that.sys_user_add = that.permissions['/admin/user:add']
      that.sys_user_update = that.permissions['/admin/user:update']
      that.sys_user_delete = that.permissions['/admin/user:delete']
      that.sys_user_select = that.permissions['/admin/user:select']
      let now1 = nowDate('YYYYMMDD')
      let now2 = nowDate('YYYY-MM-DD')
      let now3 = nowDate('YYYY/MM/DD')
      let now4 = nowDate('YYYY,MM,DD')
      let now5 = nowDate('YYYY&MM&DD')
    },

    beforeUpdate () {
      //解决列配置引发的滚动条问题
      this.$nextTick(()=>{
        this.$refs.yhTable.doLayout()
      })
    },

    methods: {
      getList() {
        const that = this
        that.listLoading = true
        fetchList(that.listQuery).then(res => {
          if (res.code == 0) {
            that.list = res.data.records
            that.total = res.data.total
          } else {
            that.$message.error(res.message)
          }
          that.listLoading = false
        })
      },
      handleAdd() {
        const that = this
        let addUserData = {
          dialogFormVisible: true
        }
        that.addUserData = JSON.parse(JSON.stringify(addUserData));
      },
      addUserCallData() {
        this.getList()
      },
      handleDelete(row) {
        const that = this
        that.$confirm(
          '此操作将永久删除该用户(登录用户名:' + row.username + '), 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          delObj(row.userId)
            .then(() => {
              that.getList()
              that.$message.success('删除成功！')
            })
            .catch(() => {
              that.$message.error('删除失败！')
            })
        })
      },
      handleEdit(row) {
        const that = this
        let editUserData = {
          dialogFormVisible: true,
          row: row,
          sys_user_delete: that.sys_user_delete
        }
        that.editUserData = JSON.parse(JSON.stringify(editUserData));
      },
      editUserCallData() {
        this.getList()
      },
      handleSearch() {
        const that = this
        that.listQuery.current = 1
        that.getList()
      },
      handleSizeChange(val) {
        const that = this
        that.listQuery.size = val
        that.getList()
      },
      handleCurrentChange(val) {
        const that = this
        that.listQuery.current = val
        that.getList()
      },
      //列配置
      cccEvent(method, table) {
        if (method === "show") {
          this.$refs.ccc.show(table);
        } else if (method === "load") {
          new Promise((resolve, reject) => {
            this.$nextTick(() => {
              resolve(this.$refs.ccc.load(table));
            });
          }).then(response => {
            let res = response
            response.forEach((item, index) => {
              if (item.sortable) {
                res[index].sortable = 'custom'
              }
            })
            this.sysUserData = res;
          });
        } else if (method === "export") {
          let vo = {
            tableCode: table,
            param: this.listQuery,
            url: `${adminModulePrefix}/user/page`,
            method: "POST",
            fileName: "用户管理",
            total: this.total
          };
          this.$refs.ccc.exportExcel(vo);
        }
      }
    }
  }

</script>

<style lang='scss' scoped>
  @import '../../../styles/contain.scss';
  .layout-container {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .search-container {
    width: 100%;
    overflow: hidden;
    height: 41px;
    margin-top: -5px;
    padding: 0;
  }
  .table-container {
    width: 100%;
    height: calc(100% - 41px);
  }
  .pagination-container{
    text-align: center;
    padding-top: 7px;
  }
  .search-container /deep/ .rightBtn {
    float: right;
    margin-right: 0;
  }
</style>
